<template>
	<!-- 公告 -->
	<view>
		<view class="card" @click="$u.route('pages/example/pages/notice')">
			<image class="title" src="../../../static/common/home-title.png"></image>
			<view class="line"></view>
			<view class="message">
				<view class="item-l">
					<p v-for="item in noticeList" :key="item.id">{{item.title}}</p>
				</view>

			</view>
			<image class="go-icon" src="../../../static/common/home-go.png">
			</image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				noticeList: [{
					id: 1,
					title: '这是公告一',
				}, {
					id: 2,
					title: '这是公告二',
				}, {
					id: 3,
					title: '这是公告三',
				}, {
					id: 4,
					title: '这是公告四',
				}, ],
			}
		},
		methods: {
			getNotice() {
				this.$api.noticeListQ().then(res => {
					this.noticeList = res.data.list
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 710rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		align-items: center;

		.title {
			width: 70rpx;
			height: 62rpx;
			margin: 0 22rpx 0 24rpx;
		}

		.line {
			width: 1rpx;
			height: 64rpx;
			background: #B3B3B3;
			border-radius: 16rpx;
		}

		.message {
			margin: 0 172rpx 0 8rpx;
			width: 440rpx;
			height: 60%;
			overflow: hidden;
			position: relative;

			.item-l {
				width: 100%;
				height: 100rpx;
				animation: ad-scroll 9s linear infinite;
				position: absolute;
				left: 0;
				top: 0;
			}

			@keyframes ad-scroll {
				0% {
					top: 0;
				}

				100% {
					top: -60px;
				}
			}

			p {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-bottom: 8rpx;
			}
		}

		.go-icon {
			width: 36rpx;
			height: 36rpx;
			margin-left: -80rpx;
		}
	}
</style>